<template>
    <view class="container">
        <view class="bar">
            <view class="back-but">
                <text class="bar-text">
                    我的
                </text>
            </view>
        </view>
        <view class="main-content">
            <view class="user-info">
                <image class="user-img" :src="userInfo && userInfo.avatar || '/static/ts_logo.png'" mode="">
                    <!-- @click="uploadAvatar" -->
                </image>
                <view class="user-blank">

                </view>
                <view class="user-details">
                    <view class="user-info">
                        <text class="user-name"> {{ userInfo && userInfo.nickName
                        }}</text>
                        <text class="user-role">{{ userInfo && userInfo.roles[0].roleName }}</text>
                    </view>
                    <!-- <text class="user-company">{{ userInfo && userInfo.company }}</text> -->
                </view>
            </view>
            <view class="list-section">
                <view class="list-item" @click="redirect('monitor')">
                    <view class="item-title">
                        <uv-icon class="left-icon" size="20" name="/static/lock-icon.png"></uv-icon>
                        <text>安全监测</text>
                    </view>
                    <view class="item-title">
                        <text></text>
                        <uv-icon name="arrow-right"></uv-icon>
                    </view>

                </view>
                <view class="list-item" @click="redirect('approval')">
                    <view class="item-title">
                        <uv-icon class="left-icon" size="20" name="/static/lock-icon.png"></uv-icon>
                        <text>审批</text>
                    </view>
                    <view class="item-title">
                        <text></text>
                        <uv-icon name="arrow-right"></uv-icon>
                    </view>

                </view>
                <view class="list-item" @click="redirect('accountSecurity')">
                    <view class="item-title">
                        <uv-icon class="left-icon" size="20" name="/static/lock-icon.png"></uv-icon>
                        <text>账号与安全</text>
                    </view>
                    <view class="item-title">
                        <text></text>
                        <uv-icon name="arrow-right"></uv-icon>
                    </view>

                </view>
                <view class="list-item">
                    <view class="item-title">
                        <uv-icon class="left-icon" size="20" name="/static/version-icon.png"></uv-icon>
                        <text>版本信息</text>
                    </view>
                    <view class="item-title" @click="checkUpdate">
                        <text class="version-text">V1.0.0点击检查更新</text>
                        <uv-icon name="arrow-right"></uv-icon>
                    </view>

                </view>
                <view class="list-item" @click="redirect('aboutUs')">
                    <view class="item-title">
                        <uv-icon class="left-icon" size="20" name="/static/version-icon.png"></uv-icon>
                        <text>关于我们</text>
                    </view>
                    <view class="item-title">
                        <text></text>
                        <uv-icon name="arrow-right"></uv-icon>
                    </view>

                </view>
                <!-- privacyAgreement -->
                <view class="list-item" @click="redirect('privacyAgreement')">
                    <view class="item-title">
                        <uv-icon class="left-icon" size="20" name="/static/privacy-icon.png"></uv-icon>
                        <text>隐私协议</text>
                    </view>
                    <view class="item-title">
                        <text></text>
                        <uv-icon name="arrow-right"></uv-icon>
                    </view>

                </view>
                <uv-button @click="handleLogout" type="primary" shape="circle" text="退出登录"
                    class="logout-but"></uv-button>
                <view class="logoutBtn">
                    <!-- <uv-button type="primary" shape="circle" text="退出登录" class="logout-but"></uv-button> -->
                </view>
            </view>
			
        </view>
		
    </view>
	<uv-modal ref="modal" title="提示" :showCancelButton='true' content='确定要退出登录吗？' @confirm="confirm"></uv-modal>
</template>

<script>
import { useUserStore } from '@/store/index.js'
import { storeToRefs } from 'pinia'
import { upload, logout } from '@/utils/app'
export default {
    setup() {
        const userStore = useUserStore()
        const { userInfo } = storeToRefs(userStore)

        // 退出登录
        // const handleLogout = () => {
            // uni.showModal({
            //     title: '提示',
            //     content: '确定要退出登录吗？',
            //     success: (res) => {
            //         if (res.confirm) {
            //             logout().then(res => {
            //                 if (res && res.code == 200) {
            //                     uni.removeStorageSync('token')
            //                     uni.removeStorageSync('userInfo')
            //                     uni.showToast({
            //                         title: res.msg,
            //                         icon: 'success'
            //                     })
            //                     uni.reLaunch({
            //                         url: '/pages/login/index'
            //                     })
            //                 } else {
            //                     uni.showToast({
            //                         title: res.msg,
            //                         icon: 'none'
            //                     })
            //                 }
            //             })

            //         }
            //     }
            // })
			// this.$refs.modal.open();
        // }

        return {
            userInfo,
            // handleLogout
        }
    },
    onLoad() {
        // 页面显示时获取用户信息
        const userStore = useUserStore()
        userStore.getInfoDeatil()
    },
    data() {
        return {
        }
    },
    methods: {
        onPullDownRefresh() {
            this.getUserInfo()
        },
        redirect(path) {
            uni.navigateTo({
                url: `/pages/${path}/index`
            })
        },
        checkUpdate() {
            //暂无更新
            uni.showToast({
                title: '已是最新版本',
                icon: 'none'
            })
        },
		handleLogout(){
			this.$refs.modal.open();
		},
		confirm(){
			logout().then(res => {
			    if (res && res.code == 200) {
			        uni.removeStorageSync('token')
			        uni.removeStorageSync('userInfo')
			        uni.showToast({
			            title: res.msg,
			            icon: 'success'
			        })
			        uni.reLaunch({
			            url: '/pages/login/index'
			        })
			    } else {
			        uni.showToast({
			            title: res.msg,
			            icon: 'none'
			        })
			    }
			})
		},
        uploadAvatar() {
            //调用手机相册，或拍照上传头像
            uni.chooseImage({
                count: 1,
                sizeType: ['original'],
                sourceType: ['album'],
                success: (res) => {
                    console.log(res, 11111);
                }
            })
            // 上传头像
            upload({
                file: res.tempFilePaths[0]
            }).then(res => {
                console.log(res, 11111);
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.bar {
    background-color: #4980FF;
    height: 240rpx;
    display: flex;
    align-items: center;
}


.back-but {
    width: 100%;
    height: 100rpx;
    display: flex;
}

.icon {
    margin-left: 20rpx;
}

.bar-text {
    width: 100%;
    font-size: 36rpx;
    color: #FFFFFF;
    text-align: center;
}

.filler {
    height: 140rpx;
    background-color: #4980FF;
}

.main-content {
    position: relative;
    width: 100%;
    height: 300px;
    background-color: #FFFFFF;
    border-radius: 20rpx 20rpx 0 0;
    margin-top: -20rpx;

    .user-img {
        position: absolute;
        transform: translateX(375rpx);
        left: -64rpx;
        top: -64rpx;
        width: 128rpx;
        height: 128rpx;
        border-radius: 40rpx;
        // background-color: #4980FF;
    }

    .user-blank {
        width: 100%;
        height: 80rpx;
    }

    .user-details {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .user-name {
        text-align: center;
    }

    .user-info {
        font-size: 32rpx;
        display: flex;
        flex-direction: column;
		align-items: center;
    }


    .user-company {
        font-size: 20rpx;
        color: rgba(0, 0, 0, 0.85);
    }

    .list-section {
        padding: 80rpx 40rpx 0;

        .list-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 2rpx solid #E5E6EB;
			font-size: 30rpx;
        }

        .item-title {
            display: flex;
            align-items: center;
            padding: 40rpx 0;

            .left-icon {
                margin-right: 20rpx;
            }

            .title {
                font-size: 32rpx;
                color: rgba(0, 0, 0, 0.85);
            }

            .version-text {
                font-size: 28rpx;
                color: #999999;
            }
        }
    }

    .logoutBtn {
        height: 90rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 40rpx;
    }

    .logout-but {
        width: 60%;
        margin: 60rpx auto 0;
    }
}
</style>
